import React from 'react'
import { HashRouter, BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
import Files from './views/files'
import Center from './views/center'
import Login from './views/login'
import { useHistory } from 'react-router-dom'
import { withRouter } from 'react-router-dom'
export default function App() {
    const history = useHistory()
    return (
        <div>
            {/* HashRouter哈希路由 BrowserRouter history路由  */}
            <BrowserRouter>
                <span onClick={() => { history.push({ path: '/files', query: { id: '123' } }) }}>go files</span>
                <Switch>
                    <Route path={'/files'} component={Files}></Route>
                    {/* <Route path={'/center'} component={Center}></Route> */}

                    <Route path={'/center'} render={(props) => {
                        // 路由守卫 中间件判断格式
                        return localStorage.getItem('token') ? <Center {...props} /> : <Redirect to={'/login'} ></Redirect>
                    }}></Route>
                    <Route path={'/login'} component={Login}></Route>
                    {/* 模糊匹配    exact精确匹配*/}
                    <Redirect from='/' to={'/center'} exact></Redirect>
                    {/* 重定向  </Switch> 匹配到一个路由就跳出 防止模糊匹配的/导致页面刷新重置问题*/}
                </Switch>
            </BrowserRouter>
        </div>
    )
}
const withItem = withRouter(Center) //借助withRouter 可以获取到props history的类型 


